<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of a Hanging Rope</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f9f9f9;
  }
  canvas {
    border: 1px solid #ddd;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="500"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style and General Settings ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // --- Define Coordinates ---
  const y_support = 100;
  const x_left_rope = 150;
  const x_right_rope = 250;
  const rope_vertical_length = 200;
  
  const y_bend = y_support + rope_vertical_length;
  const x_center_bend = (x_left_rope + x_right_rope) / 2;
  const r_bend = (x_right_rope - x_left_rope) / 2;

  // --- Draw Support Structure (Ceiling) ---
  const support_x_start = 50;
  const support_x_end = 350;
  
  // Main horizontal line
  ctx.beginPath();
  ctx.moveTo(support_x_start, y_support);
  ctx.lineTo(support_x_end, y_support);
  ctx.stroke();

  // Hatching lines
  ctx.lineWidth = 1;
  for (let x = support_x_start; x < support_x_end; x += 12) {
      ctx.beginPath();
      ctx.moveTo(x, y_support);
      ctx.lineTo(x + 12, y_support - 12);
      ctx.stroke();
  }
  ctx.lineWidth = 2; // Reset to default for other elements

  // --- Draw the Rope ---
  ctx.beginPath();
  // Start from the top left point (A's attachment)
  ctx.moveTo(x_left_rope, y_support);
  // Draw the left vertical segment
  ctx.lineTo(x_left_rope, y_bend);
  // Draw the U-shaped bend at the bottom
  // ctx.arc(centerX, centerY, radius, startAngle, endAngle)
  // To draw the lower semi-circle from left to right (counter-clockwise),
  // we go from angle PI to 2*PI (or 0).
  ctx.arc(x_center_bend, y_bend, r_bend, Math.PI, 2 * Math.PI);
  // Draw the right vertical segment up to the support (B's attachment)
  ctx.lineTo(x_right_rope, y_support);
  ctx.stroke();

  // --- Draw Labels ---
  ctx.font = 'italic 24px "Times New Roman"';

  // Label 'A'
  ctx.fillText('A', x_left_rope - 25, y_support + 25);
  // Label 'B'
  ctx.fillText('B', x_right_rope + 25, y_support + 25);

  // Function to draw a fraction
  function drawFraction(numerator, denominator, x, y, lineLength) {
    const originalFont = ctx.font;
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText(numerator, x, y - 10);
    ctx.beginPath();
    ctx.moveTo(x - lineLength / 2, y + 2);
    ctx.lineTo(x + lineLength / 2, y + 2);
    ctx.stroke();
    ctx.fillText(denominator, x, y + 15);
    ctx.font = originalFont;
  }

  // Vertical position for the L/2 labels
  const y_fraction = y_support + rope_vertical_length / 2;
  
  // Left 'L/2' label
  drawFraction('L', '2', x_left_rope - 35, y_fraction, 20);
  // Right 'L/2' label
  drawFraction('L', '2', x_right_rope + 35, y_fraction, 20);

  // --- Draw Figure Caption ---
  ctx.font = '22px "SimSun", "Songti SC", serif';
  ctx.fillText('图 1', x_center_bend, canvas.height - 40);

</script>
</body>
</html>